<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex-wrap属性使用</title>
</head>

<body>
    <div>
        弹性元素永远沿主轴排列，那么如果主轴排不下，该如何处理？<br>
        通过设置flex-wrap: nowrap | wrap | wrap-reverse可使得主轴上的元素不折行、折行、反向折行。<br>
        默认是nowrap不折行，难道任由元素直接溢出容器吗？当然不会，那么这里就涉及到<strong>元素的弹性伸缩应对<small>(默认情况下flex-shrink的值是1，就是自动收缩)</small></strong>，下面会讲到。<br>
        wrap折行，顾名思义就是另起一行，那么折行之后行与行之间的间距（对齐）怎样调整？这里又涉及到交叉轴上的多行对齐。<br>
        wrap-reverse反向折行，是从容器底部开始的折行，但每行元素之间的排列仍保留正向。<br>
    </div>
    <div>
        <p>主轴排列
            <pre>flex-wrap: nowrap</pre>
        </p>
        <div class="flex-main-axis-nowarp">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
    <div>
        <p>主轴排列
            <pre>flex-wrap: wrap</pre>
        </p>
        <div class="flex-main-axis-warp">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
    <div>
        <p>主轴排列
            <pre>flex-wrap: wrap-reverse</pre>
        </p>
        <div class="flex-main-axis-warp-reverse">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>

</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body>div:nth-child(1) {
        margin: 0 20px;
        padding: 0 10px;
    }

    body>div:not(:nth-child(1)) {
        margin: 0 20px;
        position: relative;
        float: left;
    }

    .flex-main-axis-nowarp {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: aqua;
        flex-wrap: nowrap
    }

    .flex-main-axis-warp {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: aqua;
        flex-wrap: wrap
    }

    .flex-main-axis-warp-reverse {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: aqua;
        flex-wrap: wrap-reverse
    }

    .flex-main-axis-nowarp div,
    .flex-main-axis-warp div,
    .flex-main-axis-warp-reverse div {
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>

</html>